.topo-map{
  overflow:auto;
  // min-height:500px;
  background: url("../images/topobg.png") repeat;
  background-color: rgba(51, 51, 51, 0.4);
  padding: 15px;
  .border-radius(3px);
  .topo-container{
    position:relative;
    margin: auto;
    padding-top: 30px;
    .service-area{
      position: absolute;
      top:0px;
      &.left-area{
        left: 20px;
      }
      &.right-area{
        right: 20px;
      }
      h1{
        font-size: 1.4em;
      }
      .subject-item{
        margin:20px auto;
        line-height: 120px;
        text-align: center;
        .subject-op{
          display: none;
          width: 150px;
          margin:0 auto;
          margin-top: -20px;
          line-height: 30px;
          background: #fff;
          text-align: left;
          padding-left: 20px;
          .border-radius(5px);
          a{
            &:hover{
              background: #54aff0;
              color:#fff;
            }
          }
        }
        &:hover{
          .subject-op{
            display: block;
          }
        }
      }
    }
    .app-item{
      position: absolute;
      top:50%;
      left:50%;
    }
    .map-app{
      .inline-block();
      vertical-align: middle;
      margin: auto;
      line-height: 20px;
      .border-radius(15px);
      background:#fff;
      border: 1px solid #666;
      color:#666;
      text-align:center;
      overflow: hidden;
      .map-app-title{
        width:160px;
        overflow:hidden;
        white-space:nowrap;
        text-overflow: ellipsis;
        font-weight:bold;
        margin-top:5px;
        line-height:20px;
        font-size:14px;
        a{
          color: #4d9dd7;
          &:hover{
            color: #2877b0;
          }
        }

      }
      .map-app-ico{
        .inline-block();
        margin-bottom:5px;
      }
      .data-stuff{
        font-size:12px;
        text-align:left;
        margin: 2px 22px;
      }
    }
  }
}
